<template>
    <div class="app-container" style="padding: 0 20px;">
        <el-row :gutter="16">
            <!--页面数据-->
            <el-col :span="8" :xs="24" :style="{height:'100%'}">
                <div class="head-container" :style="{height:'calc(100% - 52px)', overflow:'auto'}">
                    <el-card class="box-card" style="margin:20px 0 0 10px;">
                        <div slot="header" class="clearfix">
                            <p style="display:inline-block;margin:0;">菜单列表</p>
                            <p style="display:inline-block;font-Size:14px;margin:0;">（请点击箭头展开菜单后选择页面）</p>
                        </div>
                        <div>
                            <el-tree :expand-on-click-node="false"
                                    :data="pageTree" :props="defaultProps" @node-click="onSelect"
                            >
                            </el-tree>
                        </div>
                    </el-card>
                </div>
            </el-col>
            <!--权限列表-->
            <el-col :span="16" :xs="24" class="el-border">
                <div class="head-container" :style="{height:'calc(100% - 52px)', overflow:'auto'}">
                    <el-card class="box-card" style="margin:20px 0 0 10px;">
                        <div slot="header" class="clearfix">
                            <p style="display:inline-block;margin:0;">权限列表</p>
                            <el-tag v-show="pageName" type="success" style="margin:0 10px;">{{ pageName + '\t' + pageCode }}</el-tag>
                        </div>
                        <div>
                            <!--  搜索栏  -->
                            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
                                <el-form-item label="" prop="userName">
                                    <el-input v-model="queryParams.permissionName" placeholder="请输入完整权限名称" clearable size="small"/>
                                </el-form-item>
                                <el-form-item style="margin-left: 10px;">
                                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"  >搜索</el-button>
                                    <el-button icon="el-icon-refresh" size="mini" style="margin-left: 10px;" @click="resetQuery" >重置</el-button>
                                </el-form-item>
                            </el-form>
                            <!--     页面操作   -->
                            <el-row :gutter="10" class="mb8">
                                <el-col :span="1.5">
                                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="handlePermission">新增</el-button>
                                    <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
                                </el-col>
                            </el-row>

                            <!-- 表格列表 -->
                            <el-table v-loading="permissionLoading" :data="permissionDataShow" @selection-change="handleSelectionChange" >
                                <el-table-column type="selection"  width="55" align="center" />
                                <el-table-column label="权限名称" align="center" prop="permissionName"/>
                                <el-table-column label="按钮权限标识" align="center" prop="permissionCode"/>
                                <el-table-column label="备注" align="center" prop="remark"/>
                                <!--          单条记录操作  -->
                                <el-table-column label="操作" align="center" class-name="small-padding" width="200">
                                    <template slot-scope="scope">
                                        <el-button size="mini" type="text" icon="el-icon-edit"
                                                @click="openEditPermissionModal(scope.row)"
                                        >编辑</el-button>
                                    </template>
                                </el-table-column>

                            </el-table>
                            <!-- 分页插件 -->
                            <pagination
                                    v-show="permissionDataShow.length>0"
                                    :total="permissionDataShow.length"
                                    :page.sync="currentPage"
                                    :limit.sync="pageSize"
                            />
                        </div>
                    </el-card>
                </div>
            </el-col>
        </el-row>

        <!-- 添加权限 -->
        <el-dialog :title="title" :visible.sync="open" v-if="open" width="25%" append-to-body>
            <el-tabs>
                <permission-form :pageInfo="pageInfo"  @submitForm="getPermissionList" @cancelDialog="cancel"></permission-form>
            </el-tabs>
        </el-dialog>

    </div>
</template>

<script>
    import {asyncRoutes} from '@/router'
    import { getPageButtonPermission, deletePageButtonPermission} from '@/api/platform/buttonPermission'
    import permissionForm from "./form/permissionForm";
    import {userFuzzyQueryAuth} from "@/api/platform/account";
    export default {
        name: "index",
        components: {
            permissionForm,
        },
        data() {
            return {
                // 页面
                pageTree: [],
                pageCode: '',
                pageName: '',
                pageKey: [],
                permissionSelectedRowKeys: [],
                // 权限列表
                permissionDataShow: [],
                defaultProps: {
                    children: "children",
                    label: "title"
                },
                // 查询参数
                queryParams: {
                    pageCode: undefined,
                    permissionName: undefined,
                },
                // 权限加载效果
                permissionLoading: false,
                // 权限信息
                pageInfo: {
                    id: undefined,
                    page: '',
                    pageCode: '',
                    permissionCode: '',
                    permissionName:'',
                    remark: ''
                },
                // 分页
                currentPage: 1,
                currentIndex: '',
                pageSize: 10,
                // 非多个禁用
                multiple: true,
                // 弹出层标题
                title: "",
                // 是否弹出层
                open: false,

            }
        },
        mounted() {
            // 遍历获取菜单列表 pageTree
            asyncRoutes.forEach(element => {
                if ('meta' in element) {
                    const page = {
                        title: element.meta.title,
                        key: element.path,
                        pageCode: element.name
                    }
                    if ('children' in element) {
                        page.children = []
                        page.disabled = true
                        element.children.forEach(ele => {
                            if ('meta' in ele) {
                                const chid = []
                                let disable = false
                                if ('children' in ele) {
                                    disable = true
                                    ele.children.forEach(ele2 => {
                                        chid.push({
                                            title: ele2.meta.title,
                                            key: ele2.path,
                                            pageCode: ele2.name
                                        })
                                    })
                                }
                                page.children.push({
                                    title: ele.meta.title,
                                    key: ele.path,
                                    pageCode: ele.name,
                                    disabled: disable,
                                    children: chid
                                })
                            }
                        })
                    }
                    this.pageTree.push(page)
                }
            })
            console.log(this.pageTree)
        },
        methods: {
            // 菜单列表选择菜单
            onSelect(selectedKeys, info) {
                console.log('selectedKeys', selectedKeys)
                console.log('info', info)
                this.pageCode = info.data.pageCode // 获取页面编码
                this.pageKey = selectedKeys // path
                this.pageName = info.data.title
                this.permissionSelectedRowKeys = [] // 清空上一个页面选中的权限
                console.log('pageCode', this.pageCode)
                // console.log('path', this.pageKey)
                this.getPermissionList()
            },

            // 获取页面的按钮权限列表
            getPermissionList() {
                // 封装
                this.pageInfo.pageCode = this.pageCode;
                this.pageInfo.page = this.pageKey.key;
                this.permissionLoading = true;
                getPageButtonPermission({
                    'searchParams': {
                        'pageCode': this.pageCode
                    }
                }).then(res => {
                    if (res.retCode === '200') {
                        this.permissionDataShow = res.responseBody
                        this.permissionLoading = false;
                    } else {
                        this.$message.error('获取数据失败，请刷新重试')
                    }
                })
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                // console.log("==232=="+JSON.stringify(selection));
                this.permissionSelectedRowKeys = selection.map(item => item.id)
                this.multiple = !selection.length
            },

            /** 新增权限按钮操作 */
            handlePermission() {
                if (this.pageCode) {
                    this.open = true;
                    this.title = "添加权限";
                } else {
                    this.$message.warning('请先选择页面！')
                }
            },

            // 编辑-打开对话框
            openEditPermissionModal(row) {
                console.log('record', row)
                this.pageInfo.id = row.id
                this.pageInfo.permissionName = row.permissionName
                this.pageInfo.permissionCode = row.permissionCode
                this.pageInfo.remark = row.remark
                this.open = true;
                this.title = "修改权限";
            },

            /** 删除按钮操作 */
            handleDelete() {
                const ids = this.permissionSelectedRowKeys;
                this.$confirm('确认要删除选中的"' + this.permissionSelectedRowKeys.length + '"条数据吗？').then(() => {
                    this.permissionLoading = true;
                    return deletePageButtonPermission(ids);
                }).then(res => {
                    if (res.retCode === '200') {
                        this.$message.success('删除成功')
                        this.getPermissionList()
                    } else {
                        this.$message.error('删除失败...')
                    }
                }).finally(() => {
                    this.permissionLoading = false;
                });
            },

            /** 搜索按钮操作 */
            handleQuery() {
                if (this.pageCode) {
                    this.queryParams.pageCode = this.pageCode;
                    const searchParams = {
                        searchParams: this.queryParams
                    }
                    this.permissionLoading = true;
                    getPageButtonPermission(searchParams).then(res => {
                        if (res.retCode === '200') {
                            this.permissionDataShow = res.responseBody
                            this.permissionLoading = false;
                        } else {
                            this.$message.error('获取数据失败，请刷新重试')
                        }
                    })
                }
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.queryParams = {};
                if (this.pageCode) {
                    this.getPermissionList()
                }
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.pageInfo.id = undefined;
                this.pageInfo.permissionCode = undefined;
                this.pageInfo.permissionName = undefined;
                this.pageInfo.remark = undefined;
            },
        }
    }
</script>

<style scoped>
    /deep/ .el-dialog__body {
        padding: 10px 15px 20px 15px;
    }
</style>
